<template>
    <div class="app">
        <div>
            <button @click="addNum">添加</button>
            <button @click="removeNum">删除</button>
            <button @click="shuffleNum">打乱</button>
        </div>
        <transition-group tag="div" name="ran">
            <template v-for="item in nums" :key="item">
                <span>{{ item }}</span>
            </template>
        </transition-group>
    </div>
</template>
<script setup>
import { reactive,ref } from 'vue';
import { shuffle } from 'underscore'
const nums = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
const addNum = () => {
    nums.value.splice(randomIndex(), 0, nums.value.length)
}
const removeNum = () => {
    nums.value.splice(randomIndex(), 1)
}
const randomIndex = () => {
    return Math.floor(Math.random() * nums.value.length)
}
const shuffleNum = () => {
    nums.value=shuffle(nums.value)
}
</script>
<style scoped lang="less">
.app {
    span {
        margin: 0 10px;
        display: inline-block;
    }

    .ran-enter-from,
    .ran-leave-to {
        opacity: 0;
        transform: translateY(30px);
    }

    .ran-leave-from,
    .ran-enter-to {
        opacity: 1;
        transform: translateY(0);
    }

    .ran-enter-active,
    .ran-leave-active {
        transition: all 2s ease;
    }

    .ran-leave-active {
        position: absolute;
    }

    // 其他移动节点的动画
    .ran-move {
        transition: all 2s ease;
    }
}</style>